<template>
  <div class="information">
    <div class="information-box">
      <img :src="user.avatar" alt="" width="100px" height="100px">
      <!-- <p>{{user.username}} </p>
        <p>{{user.realname}} </p>
        <button>退出登陆</button> -->
      <div class="outcontainer">
        <svg width="700" height="250" class="text">
          <defs>
            <linearGradient id="geekColor" gradientTransform="rotate(90)">
              <stop offset="0%" stop-color="#000"></stop>
              <!-- //渐变动画 -->
              <animate attributeName="stop-color" values="#91bd3a;#12cad6;#91bd3a" dur="10s" begin="3s"
                repeatCount="indefinite"></animate>
              <stop offset="100%" stop-color="#12cad6"></stop>

            </linearGradient>
          </defs>
          <text style='text-anchor:middle;' class="logo_text" x="200" y="100">{{user.username}}</text>
          <text style='text-anchor:middle;' class="logo_text" x="200" y="150">{{user.realname}}</text>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    computed: {
      user() {
        return this.$store.getters.user
      }
    },
  }
</script>

<style lang="less" scoped>
  .information {
    position: relative;
    height: calc(100vh - 100px);

    .information-box {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 400px;
      height: 400px;
      text-align: center;
      #outlogo {
        /* background: url("../src/assets/img/rainImg.jpg"); */
        /* background-image: url("./img/rainImg.jpg"); */
        background-color: #fff;
        position: absolute;
        background-size: 100vw 100vh;
        z-index: 9999999999999999999;
        transition: all 0.5s;
      }

      .outcontainer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
      }

      .logo_text {
        
        font-size: 36px;
        fill: none;
        stroke: url(#geekColor);
        stroke-width: 1;
        stroke-dasharray: 10 280;
        stroke-dashoffset: 10;
        animation: drawing 4.3s linear 0s forwards;
      }

      img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        transition: all 0.4s;
        &:hover{
          transform: rotate(360deg);
        }
      }

      p {
        font-weight: 200;
        font-size: 20px;
        line-height: 28px;

        button {
          background-color: transparent;
          border: 1px solid rgba(0, 0, 0, 0.5);
          border-radius: 5px;
          margin-left: 10px;
        }
      }
    }
  }
  @keyframes drawing {
  to {
    stroke-dasharray: 280;
    stroke-dashoffset: 0;
  }  
}
@media screen and (max-width: 765px) {
  .logo_text{
  font-size: 96px;
}
}
</style>